<template>
  <i-card dis-hover>
    <p slot="title">所有评论</p>
    <div v-show="total === 0">暂无评论</div>
    <div class="comment" v-for="(item, index) in comments" :key="item.id" :class="{'comment-removed': item.removed}">
      <div class="comment-removed-tips">评论已删除</div>
      <div class="comment-avatar">
        <img :src="item.createdBy.avatar" />
      </div>
      <div class="comment-body">
        <h4>
          <span>{{item.createdBy.name}}</span>
          <date-span class="margin-left-10" :value="item.createdAt"></date-span>
        </h4>
        <p class="margin-top-10">{{item.content}}</p>
        <div class="comment-replies" v-show="item.comments && item.comments.length">
          <div class="comment-reply" v-for="(reply, subIndex) in item.comments" :key="reply.id" :class="{'comment-removed': reply.removed}">
            <div class="comment-removed-tips">回复已删除</div>
            <h4>
              <span>{{reply.createdBy.name}}</span><span v-if="reply.target && reply.target.name && reply.target.id != reply.createdBy.id"><small class="margin-right-10 margin-left-10">回复</small>{{reply.target.name}}</span>
            </h4>
            <p>{{reply.content}}</p>
            <p class="tips">
              <a href="javascript:;" v-bind:class="{active: reply.wasRecommended}" @click="recommend(reply)"><span>赞{{reply.recommended}}</span></a>
              · <a href="javascript:;" v-reply="reply"><span>回复</span></a>
              <span v-if="reply.editable">· <a href="javascript:;" @click="remove(subIndex, item.comments)">删除</a></span>
              · <date-span :value="reply.createdAt"></date-span></p>

          </div>
          <a class="margin-top-10 more" href="javascript:;" v-show="item.comments && item.replied > item.comments.length">加载更多回复 <i-icon type="chevron-right"></i-icon></a>
        </div>
        <p class="margin-top-10 tips">
          <a href="javascript:;" v-bind:class="{active: item.wasRecommended}" @click="recommend(item)">
            <i-icon type="thumbsup"></i-icon>
            <span>赞{{item.recommended}}</span>
          </a> · <a href="javascript:;" v-reply="item"><i-icon type="chatbox"></i-icon> <span>回复</span></a> <span v-if="item.editable">· <a href="javascript:;" @click="remove(index, comments)"><i-icon type="trash-a"></i-icon> 删除</a></span>
        </p>
      </div>
    </div>
    <i-page v-show="total" :page-size="20" style="text-align:right;" :total="total" :current="query.page" size="small" @on-change="search" show-total class="margin-top-10" show-elevator></i-page>
  </i-card>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import DateSpan from '../data-span/Date'
export default {
  props: ['objectId'],
  components: {
    DateSpan
  },
  data() {
    return {
      query: {
        page: 1,
        objectId: null
      }
    }
  },
  mounted() {
    this.setObjectId(this.objectId)
  },
  watch: {
    objectId(val) {
      this.setObjectId(val)
    }
  },
  computed: {
    ...mapGetters({
      comments: 'comments',
      total: 'totalComments'
    })
  },
  methods: {
    ...mapActions({
      loadComments: 'loadComments',
      removeComment: 'removeComment',
      recommendComment: 'recommendComment'
    }),
    setObjectId(objectId) {
      if (this.query.objectId === objectId) return
      this.query.objectId = objectId
      this.search()
    },
    search(page) {
      this.query.page = page || 1
      this.loadComments(this.query)
    },
    recommend(item) {
      let that = this
      that.recommendComment({
        id: item.id,
        callback(payload) {
          item.wasRecommended = payload === 1
          item.recommended += payload
          that.$Notice.success({
            title: '评论',
            desc: (item.wasRecommended ? '' : '取消') + '点赞成功'
          })
        }
      })
    },
    remove(index, comments) {
      let that = this
      var item = comments[index]
      that.$Modal.confirm({
        title: '确认',
        content: '确认删除评论吗？',
        okText: '确定',
        cancelText: '取消',
        loading: true,
        onOk: () => {
          that.removeComment({
            id: item.id,
            callback() {
              that.$Modal.remove()
              that.$Notice.success({
                title: '评论',
                desc: '删除评论成功'
              })
              item.removed = true
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less">
.comment {
  position: relative;
  margin-top: 15px;
  padding: 0 0 15px 15px;
  border-bottom: 1px solid #f0f0f0;
  background-color: white;
  .tips {
    font-size: 12px;
    color: #adadad;
  }
  .more {
    display: inline-block;
    font-size: 13px;
  }

  a {
    color: #adadad;
    &.active,
    &:hover {
      color: #2d8cf0;
    }
  }
  .comment-avatar {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    display: block;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .comment-body {
    min-height: 60px;
    padding-top: 10px;
    margin-left: 53px;
    h4 {
      font-weight: normal;
      font-size: 13px;
      span {
        display: inline-block;
      }
    }
    .comment-replies {
      background-color: #f7f7f7;
      padding: 8px 16px 24px;
      margin-top: 10px;
      .comment-reply {
        margin-top: 10px;
        p {
          margin-top: 5px;
        }
      }
    }
  }
  .comment-removed-tips {
    display: none;
    background: #ccc;
    padding: 15px 20px;
  }
}
.comment-removed {
  > * {
    display: none !important;
  }

  .comment-removed-tips {
    display: block !important;
  }
}
</style>
